<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Editor Custom Plugin Test/Tutorial</title>

	<style type="text/css">
		@import "../../themes/claro/document.css";
		@import "../css/dijitTests.css";
	</style>

	<!-- required: a default dijit theme: -->
	<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>

	<!-- required: dojo.js -->
	<script type="text/javascript" src="../../../dojo/dojo.js"
		data-dojo-config="isDebug: true"></script>

	<!-- not needed, for testing alternate themes -->
	<script type="text/javascript" src="../_testCommon.js"></script>

	<style>
		.customIconHtmlToggle {
			background-image: url('customIcon.gif'); /* custom editor icons sprite image */
			background-repeat: no-repeat;
			width: 18px;
			height: 18px;
			text-align: center;
		}
	</style>

	<script type="text/javascript">
		dojo.require("dijit.dijit"); // optimize: load dijit layer
		dojo.require("dijit.Editor");
		dojo.require("dojo.parser");	// scan page for widgets and instantiate them

		dojo.require("dijit._editor._Plugin");
		dojo.require("dojo.string");

		dojo.ready(function(){
			dojo.declare("MyPlugin",
				dijit._editor._Plugin,
				{
					buttonClass: dijit.form.ToggleButton,
					useDefaultCommand: false,
	
					_initButton: function(){
						this.command = "htmlToggle";
						this.editor.commands[this.command] = "View HTML source"; // note: should be localized
						this.iconClassPrefix = "customIcon";
						this.inherited(arguments);
						delete this.command; // kludge so setEditor doesn't make the button invisible
						this.connect(this.button, "onClick", this._toggleSource);
					},
	
					destroy: function(f){
						this.inherited(arguments);
						if(this.sourceArea){ dojo.destroy(this.sourceArea); }
					},
	
					_toggleSource: function(){
						this.source = !this.source;
						if(!this.sourceArea){
							this.sourceArea = dojo.doc.createElement('textarea');
							this.sourceArea.style.position = 'absolute';
							dojo.place(this.sourceArea, this.editor.domNode, "last");
						}
						if(this.source){
							this.sourceArea.style.display = "";
							this.sourceArea.value = this.editor.getValue();
							dojo.style(this.sourceArea, "borderWidth", dojo.style(this.editor.editingArea, "borderStyle") == "none" ? "0" : dojo.style(this.editor.editingArea, "borderWidth"));
							dojo.marginBox(this.sourceArea, dojo.marginBox(this.editor.editingArea));
							if(dojo.isIE){
								//work around IE oddity with offsetParent mismatch
								var p = dojo.position(this.editor.editingArea);
								dojo.style(this.sourceArea, { left: p.x, top: p.y });
							}
						}else{
							this.editor.setValue(this.sourceArea.value);
							this.sourceArea.style.top = "-999px";
							this.sourceArea.style.display = "none";
						}
	
						this.button.set('label', this.source ? "View WYSIWYG" : this.editor.commands["htmlToggle"]); // note: should be localized
					}
				}
			);
	
			/* the following code registers my plugin */
			dojo.subscribe(dijit._scopeName + ".Editor.getPlugin",null,function(o){
				if(o.plugin){ return; }
				if(o.args.name == "MyPlugin"){
					return new MyPlugin({});
				}
			});
			
			dojo.parser.parse();
		});
	</script>
</head>
<body class="claro">
	<div id="editor1" data-dojo-type="dijit/Editor" data-dojo-props='extraPlugins:["MyPlugin"], height: 150'><p>
	This editor should have my custom plugin
	</p></div>
</body>
</html>
